<template>
  <div class="app-container-groupmangerment">
    <div class="filter-group">
      <el-form ref="form" :model="groupmanagementFrom" label-width="80px">
        <div class="flexfilter">
          <el-form-item label="后台单号:">
            <el-input
              v-model.trim="groupmanagementFrom.xmbzNo"
              clearable
              placeholder="请选择后台单号"
              class="filter-item"
              size="small"
              @keyup.enter.native="handleFilter(Launchdate)"
            />
          </el-form-item>
          <!-- <el-form-item label="平台单号:">
            <el-input v-model.trim="groupmanagementFrom.platformOrderId" clearable placeholder="请选择平台单号"
              class="filter-item" size="small" @keyup.enter.native="handleFilter" />
          </el-form-item>-->
          <el-form-item label="地区:">
            <el-select
              ref="mainWarehouseRef"
              v-model="groupmanagementFrom.mainWarehouse"
              placeholder="请选择地区"
              class="filter-item"
              size="small"
              @change="getmainWarehouseIds"
              @keydown.native="selectBlur($event)"
            >
              <el-option
                v-for="item in mainWarehousesList"
                :key="item.id"
                :label="item.deptName"
                :value="{label:item.deptName,value:item.id}"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="分仓:">
            <el-select
              ref="barnchWarehousesRef"
              v-model="barnchWarehousesName"
              placeholder="请选择分仓"
              class="filter-item"
              size="small"
              @change="getbarnchWarehouses"
              @keydown.native="selectBlur($event)"
            >
              <el-option
                v-for="item in barnchWarehousesList"
                :key="item.id"
                :label="item.name"
                :value="{label:item.name,value:item.id}"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="订单状态:">
            <el-select
              ref="statusNameRef"
              v-model="statusName"
              placeholder="请选择订单状态"
              clearable
              class="filter-item"
              size="small"
              @visible-change="getstatus"
              @change="getstatusIds"
              @keydown.native="selectBlur($event)"
            >
              <el-option
                v-for="item in OrderStatus"
                :key="item.statusId"
                :label="item.status"
                :value="{label:item.status,value:item.statusId}"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="分配状态:">
            <el-select
              ref="deliveryRef"
              v-model="deliveryStatus"
              placeholder="请选择分配状态"
              clearable
              class="filter-item"
              size="small"
              @change="getdeliveryStatusIds"
              @keydown.native="selectBlur($event)"
            >
              <el-option
                v-for="item in deliveryStatusList"
                :key="item.status"
                :label="item.name"
                :value="{label:item.name,value:item.status}"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="flexfilter">
          <el-form-item label="配送时间:">
            <!-- <el-date-picker v-model="Launchdate" type="datetimerange" size="small" :default-time="['00:00:00', '23:59:00']"
              range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :clearable='false'>
            </el-date-picker>-->
            <el-date-picker
              v-model="Launchdate"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="small"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd HH:mm"
              format="yyyy-MM-dd HH:mm"
              :clearable="false"
              align="right"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <div class="flexfilter">
              <el-button
                type="primary"
                class="filter-item"
                icon="el-icon-search"
                size="small"
                @click="handleFilter(Launchdate)"
                plain
              >查询</el-button>
              <el-button
                type="success"
                onkeydown="if(event.keyCode==13){event.keyCode=0;event.returnValue=false;}"
                class="filter-item"
                icon="el-icon-truck"
                size="small"
                @click="handleistribution"
                plain
              >选择配送员</el-button>
            </div>
          </el-form-item>
        </div>
        <!-- <div class="flexfilter">

        </div>-->
      </el-form>
    </div>
    <div class="group-main">
      <div class="left" :style="{'height':curHeight+'px'}">
        <el-table
          ref="multipleTable"
          :data="groupmanagementFromlist"
          tooltip-effect="dark"
          border=""
          fit
          highlight-current-row

          @selection-change="handleSelectionChange"
          :height="curHeight+'px'"
        >
          <el-table-column type="selection" min-width="30" fixed align="center"></el-table-column>
          <el-table-column label="后台单号" prop="xmbzNo" align="left" min-width="74px">
            <template slot-scope="{row}">
              <span
                style="white-space:nowrap; cursor:pointer;"
                @click="xmbzNoPosition(row)"
              >{{ row.xmbzNo }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="平台单号" prop="id" align="left" width="120px">
            <template slot-scope="{row}">
              <span>{{ row.platformOrderId }}</span>
            </template>
          </el-table-column>-->
          <el-table-column label="分仓" prop="id" align="left" min-width="70px">
            <template slot-scope="{row}">
              <span>{{ row.branchWarehouse }}</span>
            </template>
          </el-table-column>
          <el-table-column label="配送时间" prop="timestamp" align="left" min-width="92px">
            <template slot-scope="{row}">
              <span>{{ row.deliveryTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="配送员" prop="id" align="center" fixed="right" min-width="68px">
            <template slot-scope="{row}">
              <span>{{ row.delivery }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- <pagination v-show="total>0" :total="total" :page.sync="groupmanagementFrom.page" :limit.sync="groupmanagementFrom.size"
        layout="sizes,prev, pager, next,total" @pagination="getList" />-->
      </div>
      <div class="map" :style="{'height':curHeight+'px'}">
        <div class="Selectedorderlist" @click="handleSelectedorderlist">
          <el-badge :value="this.multipleSelection.length" class="item">
            <img src="https://i.loli.net/2020/07/10/WDpSvfehqb4dBm2.png">
            选中订单列表
          </el-badge>
        </div>
        <el-amap vid="amapDemo" :zoom="zoom" :center="center" ref="map" class="amap-demo">
          <el-amap-marker
            v-if="markers&&markers.length>0"
            v-for="(marker,index) in markers"
            :key="index"
            :position="marker.position"
          ></el-amap-marker>
          <el-amap-circle
            v-for="(circle,index) in circles"
            :key="index"
            :position="circle.position"
            :radius="circle.radius"
            :fillOpacity="0.5"
            v-if="circles&&circles.length>0"
          ></el-amap-circle>
        </el-amap>
      </div>
    </div>
    <el-dialog title="配送员" :visible.sync="dialogDistributorVisible" width="width" lock-scroll>
      <el-button
        type="warning"
        plain
        size="small"
        style="margin-bottom: 10px;"
        v-model="delivery"
        @click="handledeliverys(deliveriesList)"
      >清空选中</el-button>
      <div
        v-for="(itemmain, key, index) in deliveriesList"
        :key="index"
        style="width: 100%;"
        class="deliveriesList"
      >
        <div class="deliveryperson">{{ key }}</div>
        <div class="delivery-item">
          <span
            v-for="item in itemmain"
            :key="item.index"
            :class="{'active': item.isSelected== 1}"
            @click="handledistror(item,deliveriesList)"
          >{{ item.name }}</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" v-if="saveflag">
        <el-button type="primary" @click="handelsaveOrder">保存</el-button>
      </span>
      <span slot="footer" class="dialog-footer" v-else>
        <el-button @click="dialogDistributorVisible = false">取 消</el-button>
        <el-button type="primary" @click="handelDistributeDeliveryForOrder(deliveriesList)">分配</el-button>
      </span>
    </el-dialog>
    <el-dialog title="选中订单列表" :visible.sync="dialogSelectedorderVisible" width="60%" lock-scroll>
      <el-table
        ref="multipleSelection"
        :data="multipleSelection"
        style="width: 100%"
        @selection-change="handleSelectionChangeData"
      >
        <el-table-column type="selection" width="44"></el-table-column>
        <el-table-column prop="xmbzNo" label="后台单号" width="180"></el-table-column>
        <el-table-column prop="platformOrderId" label="平台单号" width="180"></el-table-column>
        <el-table-column prop="branchWarehouse" label="分仓" width="180"></el-table-column>
        <el-table-column prop="deliveryTime" label="配送时间"></el-table-column>
        <el-table-column prop="delivery" label="配送员"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="handleDelSelectedorder">删除</el-button>
        <el-button type="primary" @click="dialogSelectedorderVisible = false">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog title="查看订单信息" :visible.sync="dialogorderdetail">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="订单信息" name="first">
          <div class="orderInfo">
            <div class="orderInfo-item">
              <span class="name">后台订单：</span>
              <span>{{orderInfoList.xmbzNo}}</span>
            </div>
            <div class="orderInfo-item">
              <span class="name">平台订单：</span>
              <span>{{orderInfoList.platformOrderId}}</span>
            </div>
            <div class="orderInfo-item">
              <span class="name">分仓：</span>
              <span>{{orderInfoList.receiverAddress}}</span>
            </div>
            <div class="orderInfo-item">
              <span class="name">收货人：</span>
              <span>{{orderInfoList.receiverName}}</span>
            </div>
            <div class="orderInfo-item">
              <span class="name">收货电话：</span>
              <span>{{orderInfoList.receiverPhone}}</span>
            </div>
            <div class="orderInfo-item">
              <span class="name">配送时间：</span>
              <span>{{orderInfoList.deliveryStartTime}}~{{orderInfoList.deliveryEndTime}}</span>
            </div>
            <div class="orderInfo-item">
              <span class="name">配送备注：</span>
              <span>{{orderInfoList.deliveryNotes}}</span>
            </div>
            <div class="orderInfo-item">
              <span class="name">客户备注：</span>
              <span>{{orderInfoList.customerNotes}}</span>
            </div>
            <div class="orderInfo-item">
              <span class="name">客服备注：</span>
              <span>{{orderInfoList.customerServiceNotes}}</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商品信息" name="second">
          <div class="goodInfo">
            <div class="goodInfomain" v-for="(child,index2) in goodInfoData" :key="index2">
              <div class="goodInfo-item">
                <span class="name">蛋糕：</span>
                <span>{{child.goodsName}}</span>
              </div>
              <div class="goodInfo-item">
                <span class="name">价格：</span>
                <span v-if="child.totalPrice">{{child.totalPrice/100}}</span>
              </div>
              <div class="goodInfo-item">
                <span class="name">规格：</span>
                <span>{{child.goodsSpecs}}</span>
              </div>
              <div class="goodInfo-item">
                <span class="name">数量：</span>
                <span>{{child.num}}</span>
              </div>
              <div class="goodInfo-item">
                <span class="name">状态：</span>
                <span>{{child.productionStateName}}</span>
              </div>
              <div class="goodInfo-item">
                <span class="name">祝福语：</span>
                <span>{{child.blessings}}</span>
              </div>
            </div>
            <div class="goodInfototal">
              所选蛋糕总计:
              <span>{{goodInfototal}}</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="配送地址" name="third">
          <div class="map">
            <div class="">
              <p>
                <span class="order-messageing">配送地址：</span>
                <span>{{ orderInfoList.receiverAddress }}</span>
              </p>
            </div>
            <el-amap vid="amapDemos" id="amapDemos" style="height: 400px;"></el-amap>
            <!-- <DetailMap id="amapDemo"></DetailMap> -->
          </div>
        </el-tab-pane>
        <el-tab-pane label="订单日志" name="fourth" style="min-height: 500px;">
          <div class="radio" style="margin-bottom: 20px;font-size: 15px;">显示方式：
            <el-radio-group v-model="reverse">
              <el-radio :label="true">倒序</el-radio>
              <el-radio :label="false">正序</el-radio>
            </el-radio-group>
          </div>
          <el-timeline :reverse="reverse">
            <el-timeline-item
              v-for="(item,index) in activities"
              :key="index"
              placement="top"
              style="font-size: 15px;"
            >
              <el-card style="box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);width: 90%;">
                <h4 style="margin-left: 8px;">{{ item.operator }}</h4>
                <h4 v-html="item.action">{{item.action}}</h4>
                <p style="margin-left: 8px;color: #5e6d82;">{{item.updateTime}}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
        <!-- <el-tab-pane label="订单日志" name="fourth"> -->
        <!-- <el-timeline style="padding-top: 10px;">
         <el-timeline-item v-for="(item,index) in activities" :key="index" placement="top" style="font-size: 15px;">
           <el-card style="box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);width: 90%;">
             <h4 style="margin-left: 8px;">{{ item.operator }}</h4>
             <h4 v-html='item.action'>{{item.action}}</h4>
             <p style="margin-left: 8px;color: #5e6d82;">{{item.updateTime}}</p>
           </el-card>
         </el-timeline-item>
       </el-timeline>
        </el-tab-pane>-->
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
import {
  getOrderForDelivery,
  getMainWarehouseList,
  getSeparateWarehouseList,
  getOrderStatus,
  getdeliveriesList,
  distributeDeliveryForOrderDispatch,
  getWarehouseList,
  getOrderInfo,
  getOrderOperateLog,
  getOrderGoodsInfo //商品信息
} from "@/api/orderDispatch";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import selecteds from "@/assets/image/selecteds.png";
import VueAMap from "vue-amap";
import { constants } from "os";
let amapManager = new VueAMap.AMapManager();
var mapSelectData = [],
  multipleSelectioncheacked = [];
var amap = new AMap.Map("amapDemo");
let self = this;

export default {
  components: {
    Pagination
  },
  data() {
    return {
      // 公共部分--------------------------------------------------------------------------------
      selecteds,
      mainWarehousesList: [], //地区
      deliveryStatusList: [
        {
          //配送分配
          name: "全部",
          status: ""
        },
        {
          name: "未分配",
          status: 0
        },
        {
          name: "已分配",
          status: 1
        }
      ],
      barnchWarehousesList: [], //分仓列表
      deliveryStatusIds: "", //分配状态的ID
      deliveryStatus: "",
      OrderStatus: [], //订单状态
      statusIds: "", //订单状态
      statusName: "",
      delivery: "", //配送员
      selecteds: "",

      // 列表数据--------------------------------------------------------------------------------
      groupmanagementFrom: {
        deptId: "",
        xmbzNo: "", // 订单号
        platformOrderId: "", //平台单号
        mainWarehouse: "全部", //地区
        warehouseId: "", //分仓

        deliveryStatus: "", //分配状态 0:未分配 1:已分配
        deliveryStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD HH:mm:ss")
          .toString(), //配送开始时间
        deliveryEndTime: this.dayjs()
          .add(3, "hour")
          .format("YYYY-MM-DD HH:59:ss")
          .toString()
        //配送结束时间
        // page: 1,
        // size: 10
      },
      barnchWarehousesName: "全部",
      Launchdate: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD HH:mm:ss")
          .toString(),
        this.dayjs()
          .add(3, "hour")
          .format("YYYY-MM-DD HH:59:ss")
          .toString()
      ],
      tableKey: 0,
      groupmanagementFromlist: [],
      total: 0,
      listLoading: true,
      multipleSelection: [], //多选数据
      multipleSelectionData: [], //多选
      // 地图数据--------------------------------------------------------------------------------
      zoom: 18,
      center: [121.5273285, 31.21515044],
      newcenter: [],
      events: {},
      // 配送员
      dialogDistributorVisible: false,
      deliveriesList: [],
      activeIndex: 0,
      // 选中订单列表
      dialogSelectedorderVisible: false,
      Selectedorderlist: [],
      SelectionChangeData: [],
      markers: [],
      markers2: [],
      circles: [
        {
          center: [121.5273285, 31.21515044]
        }
      ],
      radius: 200,
      cityareaId: "",

      childSelectItems: [],
      mapSellted: [],
      cityareaName: "",
      WarehouseListData: [],
      curHeight: 0,
      saveflag: false,
      // 查看订单
      dialogorderdetail: false,
      listdetails: [],
      activeName: "first", //生产详情显示状态
      orderInfoList: [], //订单信息
      goodInfoData: [],
      abnormalList: [], //异常列表
      goodInfototal: "", //商品信息价格
      reverse: false,
      activities: [],
      deptNameFlag: false,
      barnchtypeFlag: false,
      statusFlag: false,
      deliveryFlag: false,
    };
  },
  created() {
    this.beforeMount(240);
  },
  mounted() {
    var saberareaIds = JSON.parse(localStorage.getItem("saber-areaId"));
    this.cityareaId = saberareaIds["content"];
    var saberareaName = JSON.parse(localStorage.getItem("saber-areaname"));
    this.cityareaName = saberareaName["content"];
    this.mainWarehouse();
    this.barnchWarehouses();
    this.beforeMount(240);
    this.getList();
    this.getWarehouseListData();
    setTimeout(() => {
      this.getMapaddress(this.cityareaName, this.$refs.map.$amap);
    }, 0.4 * 1000);

    if (
      this.dialogDistributorVisible == false &&
      this.dialogSelectedorderVisible == false &&
      this.dialogorderdetail == false
    ) {
      window.addEventListener("keydown", this.keyupEnter);
    } else {
      window.removeEventListener("keydown", this.keyDown, false);
    }
  },
  // 销毁事件
  destroyed() {
    window.removeEventListener("keydown", this.keyDown, false);
  },
  methods: {
    // 公共部分--------------------------------------------------------------------------------
    // 选择框回车失焦
    selectBlur(e) {
      if (e.keyCode == 13) {
        this.$refs["mainWarehouseRef"].blur();
        this.$refs["barnchWarehousesRef"].blur();
        this.$refs["statusNameRef"].blur();
        this.$refs["deliveryRef"].blur();
        e.returnValue = false;
      }
    },
    // 回车事件
    keyupEnter() {
      if (
        this.dialogDistributorVisible == false &&
        this.dialogSelectedorderVisible == false &&
        this.dialogorderdetail == false
      ) {
        if (window.event.keyCode == 13) {
          this.handleFilter(this.Launchdate); // 查询事件
        }
      } else {
        window.removeEventListener("keydown", this.keyDown, false);
      }
    },
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {
      window.addEventListener("keydown", this.keyupEnter);
    },
    deactivated() {
      window.removeEventListener("keydown", this.keyupEnter);
    },
    //获取屏幕
    beforeMount(height) {
      var h =
        document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - height; //减去页面上固定高度height
    },
    mainWarehouse() {
      getMainWarehouseList({
        parentId: this.cityareaId
      }).then(response => {
        response.data.data.unshift({
          id: "",
          deptName: "全部"
        });
        this.mainWarehousesList = response.data.data;
        this.mainWarehouseIds = response.data.data[0].id;
        this.mainWarehouseNames = response.data.data[0].deptName;
        this.groupmanagementFrom.mainWarehouse = response.data.data[0].deptName;
      });
    },
    getmainWarehouseIds(data) {
      if (this.groupmanagementFrom.mainWarehouse == "全部") {
        this.productionQuery.mainWarehouse = "";
        this.mainWarehouseNames = "";
        this.mainWarehouseIds = "";
        this.barnchWarehouses();
      } else {
        this.groupmanagementFrom.mainWarehouse = data.label;
        this.mainWarehouseNames = data.label;
        this.mainWarehouseIds = data.value;
        this.barnchWarehouses();
      }
      // this.groupmanagementFrom.mainWarehouse = data.label;
      //  this.mainWarehouseNames= data.label;
      // this.mainWarehouseIds = data.value;
      this.barnchWarehousesName = "全部";
      this.groupmanagementFrom.warehouseId = "";
    },

    getdeliveryStatusIds(data) {
      if (data) {
        this.deliveryStatusIds = data.value;
      } else {
        this.deliveryStatusIds = "";
        this.groupmanagementFrom.deliveryStatusIds = "";
      }
    },
    barnchWarehouses() {
      // if (
      //   this.groupmanagementFrom.mainWarehouse == "" ||
      //   this.mainWarehouseIds == null ||
      //   this.mainWarehouseIds == "undefined"
      // ) {
      //   this.$message({
      //     showClose: true,
      //     message: "请选择地区",
      //     type: "warning"
      //   });
      // } else {
      var saberareaIds = JSON.parse(localStorage.getItem("saber-areaId"));
      this.cityareaId = saberareaIds["content"];
      getSeparateWarehouseList({
        cityId: this.cityareaId,
        deptId: this.mainWarehouseIds == "" ? "" : this.mainWarehouseIds
      }).then(response => {
        response.data.data.unshift({
          id: "",
          name: "全部"
        });
        this.barnchWarehousesList = response.data.data;
        this.mainWarehouseIds = response.data.data[0].id;
        this.barnchWarehousesName = response.data.data[0].name;
        this.groupmanagementFrom.warehouseId = response.data.data[0].id;
      });
      // }
    },
    getbarnchWarehouses(data) {
      this.groupmanagementFrom.warehouseId = data.value;
      this.barnchWarehousesName = data.label;
    },
    getstatusIds(data) {
      if (data) {
        this.statusIds = data.value;
        this.statusName = data.label;
      } else {
        this.statusIds = "";
        this.groupmanagementFrom.status = "";
        this.statusName = "";
      }
    },
    getstatus() {
      //订单状态
      getOrderStatus("").then(res => {
        this.OrderStatus = res.data.data;
      });
    },
    //根据城市获取地图位置
    getMapaddress(name, mapObj) {
      var MSearch;
      // var mapObj = this.$refs.map.$amap;
      // mapObj.setZoomAndCenter(14, [poiArr[0].location.lng, poiArr[0].location.lat]);
      mapObj.plugin(["AMap.PlaceSearch"], () => {
        // mapObj.addControl(new AMap.ToolBar())
        // mapObj.addControl(new AMap.Scale())
        MSearch = new AMap.PlaceSearch({
          //构造地点查询类
          city: "北京市" //城市
        });
        AMap.event.addListener(
          MSearch,
          "complete",
          this.keywordSearch_CallBack
        ); //返回地点查询结果
        MSearch.search(name); //关键字查询
      });
    },
    keywordSearch_CallBack(data) {
      // var mapObj = this.$refs.map.$amap;
      var poiArr = data.poiList.pois;
      var resultCount = poiArr.length;
      this.poiArr = poiArr; //左边要渲染的数据
      this.$refs.map.$amap.setFitView();
      this.$refs.map.$amap.setZoomAndCenter(12, [
        poiArr[0].location.lng,
        poiArr[0].location.lat
      ]);
      this.newcenter = [poiArr[0].location.lng, poiArr[0].location.lat];
    },
    //列表--------------------------------------------------------------------------------
    getList() {
      //列表
      this.groupmanagementFrom.deptId = this.cityareaId;
      (this.groupmanagementFrom.deliveryStartTime = this.dayjs(
        this.groupmanagementFrom.deliveryStartTime
      )
        .format("YYYY-MM-DD HH:mm:00")
        .toString()), //配送开始时间
        (this.groupmanagementFrom.deliveryEndTime = this.dayjs(
          this.groupmanagementFrom.deliveryEndTime
        )
          .format("YYYY-MM-DD HH:mm:59")
          .toString()), //配送结束时间
        (this.listLoading = true);

      this.groupmanagementFrom.mainWarehouse =
        this.mainWarehouseNames == "全部" ? "" : this.mainWarehouseNames;
      getOrderForDelivery(this.groupmanagementFrom).then(response => {
        this.groupmanagementFromlist = response.data.data;
        this.groupmanagementFromlist.map(item => {
          item.checked = false;
        });
        setTimeout(() => {
          this.listLoading = false;
          this.getShowmap(this.groupmanagementFromlist);
          // if (this.WarehouseListData) {
          //   this.ShowWarehouse(this.WarehouseListData, this.$refs.map.$amap);
          // }
          // this.getMapaddress(this.cityareaName, this.$refs.map.$amap);
        }, 0.1 * 1000);
        if (this.groupmanagementFrom.mainWarehouse == "") {
          this.groupmanagementFrom.mainWarehouse = "全部";
          this.mainWarehouseNames = "";
        }
      });
    },
    getWarehouseListData() {
      getWarehouseList({
        deptId: this.cityareaId
      }).then(response => {
        this.WarehouseListData = response.data.data;
        this.ShowWarehouse(this.WarehouseListData, this.$refs.map.$amap);
      });
    },
    //查询订单
    handleFilter(times) {
      //查询
      // this.groupmanagementFrom.page = 1;
      this.groupmanagementFrom.mainWarehouse = this.mainWarehouseNames;
      this.groupmanagementFrom.deliveryStatus = this.deliveryStatusIds;
      this.groupmanagementFrom.status = this.statusIds;
      if (times) {
        this.groupmanagementFrom.deliveryStartTime = this.dayjs(times[0])
          .format("YYYY-MM-DD HH:mm:ss")
          .toString();
        this.groupmanagementFrom.deliveryEndTime = this.dayjs(times[1])
          .format("YYYY-MM-DD HH:mm:ss")
          .toString();
      }
      var time1 = Date.parse(this.groupmanagementFrom.deliveryStartTime);
      var time2 = Date.parse(this.groupmanagementFrom.deliveryEndTime);
      this.groupmanagementFrom.mainWarehouse =
        this.mainWarehouseNames == "全部" ? "" : this.mainWarehouseNames;
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        });
      } else {
        this.$refs.map.$amap.clearMap();
        this.getList();
        this.getWarehouseListData();
      }
    },
    // 选择订单
    handleSelectionChange(val) {
      var self = this;
      this.multipleSelection = val;
      // var map = new AMap.Map("amapDemo");
      this.groupmanagementFromlist.map(item => {
        item.checked = false;
        this.multipleSelection.map(child => {
          child.checked = true;
        });
      });
      this.$refs.map.$amap.view.map.Ce.overlays.forEach(marker => {
        let exists = false;
        if (val.length && val.length > 0 && marker.item) {
          for (let item in val) {
            if (val[item].id === marker.item.id) {
              exists = true;
              break;
            }
          }
        }
        if (marker.item && marker.item.isDelivery == 0) {
          marker.setIcon(
            exists
              ? "http://api.xiongmaodangao.com/images/xmdg_blue.png"
              : "http://api.xiongmaodangao.com/images/xmdg_red.png"
          );
        }
        if (marker.item && marker.item.isDelivery == 1) {
          marker.setIcon(
            exists
              ? "http://api.xiongmaodangao.com/images/xmdg_blue.png"
              : "http://api.xiongmaodangao.com/images/xmdg_green.png"
          );
        }
      });
    },

    // 选中订单列表
    handleSelectedorderlist() {
      this.dialogSelectedorderVisible = true;
    },
    // 选中订单列表选择
    handleSelectionChangeData(value) {
      this.childSelectItems = value;
    },
    //配送员------------------------------------------------------------------------------
    handleistribution() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning("请选择至少一张订单");
        return;
      } else {
        this.dialogDistributorVisible = true;
        let ids = [];
        this.multipleSelection.map(item => {
          ids.push(item.xmbzNo);
        });
        const selectData = {
          xmbzNos: ids.join(","),
          deptId: this.cityareaId
        };
        getdeliveriesList(selectData).then(response => {
          this.deliveriesList = response.data.data;
          let isSelectedlist = [];
          for (let warp in this.deliveriesList) {
            this.deliveriesList[warp].map(item => {
              if (item.isSelected == "1") {
                isSelectedlist.push(item);
              }
            });
          }
          if (isSelectedlist.length > 0) {
            this.saveflag = false;
          } else {
            this.saveflag = true;
          }
        });
      }
    },
    //清空配送员
    handledeliverys(list) {
      this.saveflag = true;
      for (let warp in list) {
        list[warp].map(item => {
          item.isSelected = 0;
        });
      }
      this.delivery = "";
    },

    // 选择配送员
    handledistror(sel, list) {
      this.saveflag = false;
      for (let warp in list) {
        list[warp].map(item => {
          item.isSelected = 0;
          if (sel.name === item.name) {
            item.isSelected = 1;
          }
        });
      }
      this.delivery = sel.name;
    },
    //分配
    handelDistributeDeliveryForOrder(list) {
      let isSelectedlist = [];
      for (let warp in list) {
        list[warp].map(item => {
          if (item.isSelected == "1") {
            isSelectedlist.push(item);
          }
        });
      }
      if (this.multipleSelection.length === 0) {
        this.$message.warning("请选择至少一张订单");
        return;
      }
      if (isSelectedlist.length > 1) {
        this.$message.warning("不能同时分配给多个配送员");
        return;
      }
      let ids = [];
      this.multipleSelection.map(item => {
        ids.push(item.id);
      });
      const selectData = {
        ids: ids,
        account: this.delivery == "" ? isSelectedlist[0].name : this.delivery
      };
      distributeDeliveryForOrderDispatch(selectData).then(() => {
        this.$notify({
          title: "成功",
          message: "添加配送员成功",
          type: "success",
          duration: 2000
        });
        this.dialogDistributorVisible = false;
        setTimeout(() => {
          this.getList();
        }, 0.1 * 1000);
      });
    },
    handelsaveOrder() {
      let ids = [];
      this.multipleSelection.map(item => {
        ids.push(item.id);
      });
      const selectData = {
        ids: ids,
        account: this.delivery
      };
      distributeDeliveryForOrderDispatch(selectData).then(() => {
        this.$notify({
          title: "提示",
          message: "该订单的配送员已清空",
          type: "warning"
        });
        this.$refs.map.$amap.clearMap();
        this.dialogDistributorVisible = false;
        setTimeout(() => {
          this.getList();
          this.getWarehouseListData();
        }, 0.1 * 1000);
      });
    },

    // 删除选择订单
    handleDelSelectedorder() {
      this.$confirm("确定删除选中数据？ 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const child = this.childSelectItems;
          child.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 地图 ---------------------------------------------------------- -----------------------------
    // 显示仓库范围（圆圈）
    ShowWarehouse(warehouseData, map) {
      var markers = [];
      for (var i = 0; i < warehouseData.length; i++) {
        let marker = {
          position: eval(
            "[" +
              warehouseData[i].longitude +
              "," +
              warehouseData[i].latitude +
              "]"
          ),
          icon: "https://i.loli.net/2020/08/19/SeV7FEdmy5j8bg6.png",
          content: warehouseData[i].address,
          size: new AMap.Size(10, 10), //图标所处区域大小
          imageSize: new AMap.Size(10, 10) //图标大小
        };
        markers.push(marker);
        let circle = new AMap.Circle({
          center: eval(
            "[" +
              warehouseData[i].longitude +
              "," +
              warehouseData[i].latitude +
              "]"
          ), // 圆心位置
          radius: 500, //半径
          strokeColor: "#F33", //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 3, //线粗细度
          fillColor: "#ee2200", //填充颜色
          fillOpacity: 0.35 //填充透明度
        });
        map.add([circle]);
      }
      markers.forEach(function(marker) {
        let mar = new AMap.Marker({
          map: map,
          position: [marker.position[0], marker.position[1]],
          offset: new AMap.Pixel(-20, -20),
          icon: "https://i.loli.net/2020/08/19/SeV7FEdmy5j8bg6.png",
          size: new AMap.Size(10, 10), //图标所处区域大小
          imageSize: new AMap.Size(10, 10) //图标大小
        });
        mar.setLabel({
          //修改label相对于maker的位置
          offset: new AMap.Pixel(-20, -20),
          content: marker.content
        });
      });
    },
    //显示分配与未分配
    getShowmap(item) {
      let self = this;
      var markers = [];
      var markersSelection = [];
      for (var i = 0; i < item.length; i++) {
        if (item[i].checked == false) {
          if (item[i].isDelivery == 0) {
            // 已处理为“绿色”，未处理为“红色”，选中为“蓝色”最新
            //yi分组，未分配 显示绿色
            var myIcon = new AMap.Marker({
              position: [item[i].longitude, item[i].latitude],
              icon: "http://api.xiongmaodangao.com/images/xmdg_red.png"
            });
            if (item[i].delivery) {
              myIcon.setLabel({
                //修改label相对于maker的位置
                offset: new AMap.Pixel(-20, -20),
                content:
                  item[i].xmbzNo +
                  "|" +
                  item[i].deliveryTime +
                  "|" +
                  item[i].delivery,
                backgroundColor: "0.00001"
              });
            } else {
              myIcon.setLabel({
                //修改label相对于maker的位置
                offset: new AMap.Pixel(-20, -20),
                content: item[i].xmbzNo + "|" + item[i].deliveryTime + "|",
                backgroundColor: "0.00001"
              });
            }

            this.markers = myIcon;
            myIcon.item = item[i];
            myIcon.id = item[i].xmbzNo;
            this.$refs.map.$amap.add(myIcon);
            myIcon.on("rightclick", function(items) {
              // console.log(items,'233')
              self.activeName = "first";
              self.reverse = false;
              self.listdetails = Object.assign({}, items); // copy obj
              self.dialogorderdetail = true;
              getOrderInfo({
                orderId: items.target.item.id
              }).then(res => {
                self.orderInfoList = res.data.data;
              });
            });
            document.oncontextmenu = function() {
              /*阻止浏览器默认弹框*/
              return false;
            };
            myIcon.on("click", function(items) {
              var eid = items.target.id;
              if (mapSelectData.indexOf(eid) == -1) {
                //看看里面有没有这个点如果没有，就改点的颜色为选中状态，并把订单号记录进去
                this.setIcon(
                  "http://api.xiongmaodangao.com/images/xmdg_blue.png"
                );
                self.addMapList(eid, this.item);
              } else {
                //说明有这个单，就取消掉这个单，把点的颜色改为没有选中的状态，green
                //去掉数据
                this.setIcon(
                  "http://api.xiongmaodangao.com/images/xmdg_red.png"
                );
                self.delMapList(eid, items);
              }
            });
          } else if (item[i].isDelivery == 1) {
            //已分配 绿色
            var myIcon2 = new AMap.Marker({
              position: [item[i].longitude, item[i].latitude],
              icon: "http://api.xiongmaodangao.com/images/xmdg_green.png"
            });
            myIcon2.setLabel({
              //修改label相对于maker的位置
              offset: new AMap.Pixel(-20, -20),
              content:
                item[i].xmbzNo +
                "|" +
                item[i].deliveryTime +
                "|" +
                item[i].delivery,
              backgroundColor: "0.00001"
            });
            this.$refs.map.$amap.add(myIcon2);
            myIcon2.id = item[i].xmbzNo;
            myIcon2.item = item[i];
            // this.markers = myIcon2;
            myIcon2.on("rightclick", function(items) {
              // console.log(items,'233')
              self.activeName = "first";
              self.reverse = false;
              self.listdetails = Object.assign({}, items); // copy obj
              self.dialogorderdetail = true;
              getOrderInfo({
                orderId: items.target.item.id
              }).then(res => {
                self.orderInfoList = res.data.data;
              });
            });
            document.oncontextmenu = function() {
              /*阻止浏览器默认弹框*/
              return false;
            };
            myIcon2.on("click", function(items) {
              var eid = items.target.id;
              if (mapSelectData.indexOf(eid) == -1) {
                //看看里面有没有这个点如果没有，就改点的颜色为选中状态，并把订单号记录进去
                this.setIcon(
                  "http://api.xiongmaodangao.com/images/xmdg_blue.png"
                );
                self.addMapList(eid, this.item);
              } else {
                //说明有这个单，就取消掉这个单，把点的颜色改为没有选中的状态，green
                //去掉数据
                this.setIcon(
                  "http://api.xiongmaodangao.com/images/xmdg_green.png"
                );
                self.delMapList(eid, items);
              }
            });
          }
        } else {
          // 选中
          var myIcon2 = new AMap.Marker({
            position: [item[i].longitude, item[i].latitude],
            icon: "http://api.xiongmaodangao.com/images/xmdg_blue.png"
          });
          myIcon2.setLabel({
            //修改label相对于maker的位置
            offset: new AMap.Pixel(-20, -20),
            content:
              item[i].xmbzNo +
              "|" +
              item[i].deliveryTime +
              "|" +
              item[i].delivery,
            backgroundColor: "0.00001"
          });
          this.$refs.map.$amap.add(myIcon2);
          myIcon2.item = item[i];
          myIcon2.id = item[i].xmbzNo;
          myIcon2.on("rightclick", function(items) {
            // console.log(items,'233')
            self.activeName = "first";
            self.reverse = false;
            self.listdetails = Object.assign({}, items); // copy obj
            self.dialogorderdetail = true;
            getOrderInfo({
              orderId: items.target.item.id
            }).then(res => {
              self.orderInfoList = res.data.data;
            });
          });
          document.oncontextmenu = function() {
            /*阻止浏览器默认弹框*/
            return false;
          };
          myIcon2.on("click", function(items) {
            var eid = items.target.id;
            this.setIcon("http://api.xiongmaodangao.com/images/xmdg_red.png");
            self.delMapList(eid, items);
          });
        }
      }
    },
    handleClick(tab) {
      console.log(this.listdetails);
      if (tab.index == "0") {
        getOrderInfo({
          orderId: this.listdetails.target.item.id
        }).then(res => {
          this.orderInfoList = res.data.data;
        });
      } else if (tab.index == "1") {
        getOrderGoodsInfo({
          orderId: this.listdetails.target.item.id
        }).then(res => {
          this.goodInfoData = res.data.data;
          var goodInfototal = [];
          this.goodInfoData.map(item => {
            goodInfototal.push(item.totalPrice);
          });
          goodInfototal.reduce(function(total, currentValue) {
            goodInfototal = total + currentValue;
            return goodInfototal;
          });
          this.goodInfototal = goodInfototal / 100;
        });
      } else if (tab.index == "2") {
        getOrderInfo({
          orderId: this.listdetails.target.item.id
        }).then(res => {
          this.orderInfoList = res.data.data;
          let arriveCoor = [
            this.orderInfoList.longitude,
            this.orderInfoList.latitude
          ];
          this.adddetMarker(arriveCoor);
        });
      } else if (tab.index == "3") {
        getOrderOperateLog({
          orderId: this.listdetails.target.item.id
        }).then(res => {
          this.activities = res.data.data;
        });
      }
    },
    //地图锚点
    adddetMarker(arriveCoor) {
      var map = new AMap.Map("amapDemos");
      // 点标记中的文本
      var marker = new AMap.Marker({
        // icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        icon: new AMap.Icon({
          image:
            "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          size: new AMap.Size(28, 36), //图标所处区域大小
          imageSize: new AMap.Size(28, 36) //图标大小
        }),
        position: arriveCoor,
        offset: new AMap.Pixel(-20, -20)
      }); // 设置label标签
      // label默认蓝框白底左上角显示，样式className为：amap-marker-label
      marker.setLabel({
        offset: new AMap.Pixel(-20, -20), //设置文本标注偏移量
        content: `<div class='info' style='padding:2px;border: 1px solid blue;'>${
          this.orderInfoList.receiverAddress
        }</div>`, //设置文本标注内容
        direction: "top" //设置文本标注方位
      });
      map.add(marker);
      map.setZoomAndCenter(13, arriveCoor);
    },

    //添加
    addMapList(id, items) {
      mapSelectData.push(id);
      this.$refs.multipleTable.toggleRowSelection(items);
    },
    //删除
    delMapList(id, items) {
      this.$refs.multipleTable.toggleRowSelection(items.target.item);
      var index = mapSelectData.indexOf(id);
      if (index > -1) {
        mapSelectData.splice(index, 1);
      }
    },
    // 添加锚点
    addMarker(item, mapObj) {
      // 自定义点标记内容
      var myIcon = new AMap.Marker({
        position: [item.lnglat.lng, item.lnglat.lat],
        icon: "http://api.xiongmaodangao.com/images/xmdg_red.png"
      });
      mapObj.add(myIcon);
      this.markers = myIcon;
    },
    xmbzNoPosition(item) {
      // this.$refs.map.$amap.setZoomAndCenter(19,[item.longitude, item.latitude]);
       let self = this;
      var markers = [];
      if (item.checked == false) {
        if (item.isDelivery == 0) {
          // 已处理为“绿色”，未处理为“红色”，选中为“蓝色”最新
          //yi分组，未分配 显示绿色
          var myIcon = new AMap.Marker({
            position: [item.longitude, item.latitude],
            icon: "http://api.xiongmaodangao.com/images/xmdg_red.png",
            zIndex:100
          });
          if (item.delivery) {
            myIcon.setLabel({
              //修改label相对于maker的位置
              offset: new AMap.Pixel(-20, -20),
              content:
                item.xmbzNo + "|" + item.deliveryTime + "|" + item.delivery,
              backgroundColor: "0.00001"
            });
          } else {
            myIcon.setLabel({
              //修改label相对于maker的位置
              offset: new AMap.Pixel(-20, -20),
              content: item.xmbzNo + "|" + item.deliveryTime + "|",
              backgroundColor: "0.00001"
            });
          }

          this.markers = myIcon;
          myIcon.item = item;
          myIcon.id = item.xmbzNo;
          this.$refs.map.$amap.add(myIcon);
          this.$refs.map.$amap.setZoomAndCenter(19, [
            item.longitude,
            item.latitude
          ]);
          myIcon.on("rightclick", function(items) {
            // console.log(items,'233')
            self.activeName = "first";
            self.reverse = false;
            self.listdetails = Object.assign({}, items); // copy obj
            self.dialogorderdetail = true;
            getOrderInfo({
              orderId: items.target.item.id
            }).then(res => {
              self.orderInfoList = res.data.data;
            });
          });
          document.oncontextmenu = function() {
            /*阻止浏览器默认弹框*/
            return false;
          };
          myIcon.on("click", function(items) {
            var eid = items.target.id;
            if (mapSelectData.indexOf(eid) == -1) {
              //看看里面有没有这个点如果没有，就改点的颜色为选中状态，并把订单号记录进去
              this.setIcon(
                "http://api.xiongmaodangao.com/images/xmdg_blue.png"
              );
              self.addMapList(eid, this.item);
            } else {
              //说明有这个单，就取消掉这个单，把点的颜色改为没有选中的状态，green
              //去掉数据
              this.setIcon("http://api.xiongmaodangao.com/images/xmdg_red.png");
              self.delMapList(eid, items);
            }
          });
        } else if (item.isDelivery == 1) {
          //已分配 绿色
          var myIcon2 = new AMap.Marker({
            position: [item.longitude, item.latitude],
            icon: "http://api.xiongmaodangao.com/images/xmdg_green.png",
             zIndex:100
          });
          myIcon2.setLabel({
            //修改label相对于maker的位置
            offset: new AMap.Pixel(-20, -20),
            content:
              item.xmbzNo + "|" + item.deliveryTime + "|" + item.delivery,
            backgroundColor: "0.00001"
          });
          this.$refs.map.$amap.add(myIcon2);
          this.$refs.map.$amap.setZoomAndCenter(19, [
            item.longitude,
            item.latitude
          ]);
          myIcon2.id = item.xmbzNo;
          myIcon2.item = item;
          // this.markers = myIcon2;
          myIcon2.on("rightclick", function(items) {
            // console.log(items,'233')
            self.activeName = "first";
            self.reverse = false;
            self.listdetails = Object.assign({}, items); // copy obj
            self.dialogorderdetail = true;
            getOrderInfo({
              orderId: items.target.item.id
            }).then(res => {
              self.orderInfoList = res.data.data;
            });
          });
          document.oncontextmenu = function() {
            /*阻止浏览器默认弹框*/
            return false;
          };
          myIcon2.on("click", function(items) {
            var eid = items.target.id;
            if (mapSelectData.indexOf(eid) == -1) {
              //看看里面有没有这个点如果没有，就改点的颜色为选中状态，并把订单号记录进去
              this.setIcon(
                "http://api.xiongmaodangao.com/images/xmdg_blue.png"
              );
              self.addMapList(eid, this.item);
            } else {
              //说明有这个单，就取消掉这个单，把点的颜色改为没有选中的状态，green
              //去掉数据
              this.setIcon(
                "http://api.xiongmaodangao.com/images/xmdg_green.png"
              );
              self.delMapList(eid, items);
            }
          });
        }
      } else {
        // 选中
        var myIcon2 = new AMap.Marker({
          position: [item.longitude, item.latitude],
          icon: "http://api.xiongmaodangao.com/images/xmdg_blue.png",
           zIndex:100
        });
        myIcon2.setLabel({
          //修改label相对于maker的位置
          offset: new AMap.Pixel(-20, -20),
          content: item.xmbzNo + "|" + item.deliveryTime + "|" + item.delivery,
          backgroundColor: "0.00001"
        });
        this.$refs.map.$amap.add(myIcon2);
        this.$refs.map.$amap.setZoomAndCenter(19, [
          item.longitude,
          item.latitude
        ]);
        myIcon2.item = item;
        myIcon2.id = item.xmbzNo;
        myIcon2.on("rightclick", function(items) {
          // console.log(items,'233')
          self.activeName = "first";
          self.reverse = false;
          self.listdetails = Object.assign({}, items); // copy obj
          self.dialogorderdetail = true;
          getOrderInfo({
            orderId: items.target.item.id
          }).then(res => {
            self.orderInfoList = res.data.data;
          });
        });
        document.oncontextmenu = function() {
          /*阻止浏览器默认弹框*/
          return false;
        };
        myIcon2.on("click", function(items) {
          var eid = items.target.id;
          this.setIcon("http://api.xiongmaodangao.com/images/xmdg_red.png");
          self.delMapList(eid, items);
        });
      }


    }
  }
};
</script>

<style lang='scss'>
.app-container-groupmangerment {
  padding: 10px 5px 10px 10px;
  box-sizing: border-box;

  .filter-group {
    .flexfilter {
      display: flex;

      .formitem {
        width: 640px;
      }
    }

    .el-form-item {
      margin-bottom: 10px !important;
    }
  }

  tr.map_act {
    color: red !important;
    background-color: #fff !important;
  }

  .orderInfo {
    .orderInfo-item {
      display: flex;
      line-height: 40px;
      display: flex;
      color: #8c8989;

      .name {
        display: block;
        width: 120px;
        color: #000;
      }
    }
  }

  .goodInfo {
    .goodInfomain {
      webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      border: 1px solid #ebeef5;
      background-color: #fff;
      overflow: hidden;
      color: #606266;
      transition: 0.3s;
      margin-bottom: 10px;
      padding: 10px;

      .goodInfo-item {
        display: flex;
        line-height: 24px;

        .name {
          display: block;
          color: #000;
        }
      }
    }

    .goodInfototal {
      font-weight: 500;
      font-size: 18px;
    }
  }

  .group-main {
    display: flex;
    justify-content: space-between;

    .left {
      width: 23.5%;
      /* height: 550px; */
      overflow-y: scroll;

      .el-table .cell {
        padding: 0 5px !important;
      }

      .el-table td,
      .el-table th {
        padding: 8px 0 !important;
      }
    }

    .map {
      width: 76%;
      /* height: 550px; */
      position: relative;

      .amap-marker-label {
        border: 1px solid blue !important;
        padding: 3px !important;
        background-color: #fff;
      }

      .Selectedorderlist {
        padding-left: 8px;
        position: absolute;
        z-index: 2;
        top: 30px;
        right: 30px;
        border-radius: 4px;
        width: 140px;
        background-color: #409eff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        line-height: 40px;
        color: #fff;

        img {
          width: 24px;
          height: 24px;
          vertical-align: middle;
        }
      }
    }
  }

  .deliveriesList {
    border-top: 1px solid #ebeef5;
    display: flex;
    line-height: 44px;

    .deliveryperson {
      margin-right: 10px;
    }

    .delivery-item {
      cursor: pointer;
      /* padding-left: 20px; */
      display: flex;
      flex: 1;
      width: 50%;
      flex-wrap: wrap;

      span {
        width: 90px;

        text-align: center;

        &.active {
          width: 77px;
          height: 32px;
          line-height: 17px;
          border-radius: 3px;
          background-color: rgba(238, 248, 232, 1);
          color: rgba(122, 199, 86, 1);
          font-size: 12px;
          text-align: left;
          font-family: Roboto;
          border: 1px solid rgba(122, 199, 86, 1);
          text-align: center;
          line-height: 32px;
          margin-top: 6px;
        }
      }
    }

    &:last-child {
      border-bottom: 1px solid #ebeef5;
    }
  }
}
</style>
